<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE HTML>
<%
    String sel1 = request.getParameter("sel1");
    String sel2 = request.getParameter("sel2");

    String jhlx = java.net.URLDecoder.decode(request.getParameter("jhlx"), "utf-8");//request.getParameter("jhlx");
    String rclx = java.net.URLDecoder.decode(request.getParameter("rclx"), "utf-8");
    String pclx = java.net.URLDecoder.decode(request.getParameter("pclx"), "utf-8");
    String bfsj = java.net.URLDecoder.decode(request.getParameter("bfsj"), "utf-8");
%>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Highcharts Example</title>

    <style type="text/css">
        #container {
            height: 90vh;
            margin: 0 auto;
        }
    </style>
</head>
<body>

<script src="../../js/jquery.min.js"></script>
<%--<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>--%>
<script src="../../js/joy.loader.js" modules="form,dataview"></script>
<script src="../../js/prj/main.js"></script>
<script src="code/highcharts.js"></script>
<script src="code/highcharts-more.js"></script>
<script src="code/modules/exporting.js"></script>
<script src="code/js/themes/grid-light.js"></script>

<div id="container"></div>


<script type="text/javascript">

    $().ready(function () {

        var categories = ['1940-1949','1950-1959' ,'1960-1969' ,'1970-1979', '1980-1989','1990-1999'];
        //数据初始化
        var chart;
        var title = '';
        var totle = '';
        joy.postJSON("/html/ps/psquery/findRCAge.ht", function (resultObject) {
            var list1 = resultObject.return1;//resultObject.returnY; //计划类型一
            var list2 = resultObject.return2;//resultObject.returnZ; //计划类型二
//          var result=split_array(resultObject,resultObject.length/2);
            test(list1, list2);
        });


        test();

        function test(list1,list2) {
            chart = Highcharts.chart('container', {
                chart: {
                    type: 'bar'
                },
                title: {
                    text: '厦门市高层次人才性别-年龄金字塔'
                },
//                subtitle: {
//                    useHTML: true,
//                    text: '数据来源: <a href="http://populationpyramid.net/germany/2015/">1950 ~ 2100 年世界人口金字塔</a>'
//                },
                xAxis: [{
                    categories: categories,
                    reversed: false,
                    labels: {
                        step: 1
                    }
                }, { // mirror axis on right side
                    opposite: true,
                    reversed: false,
                    categories: categories,
                    linkedTo: 0,
                    labels: {
                        step: 1
                    }
                }],
                yAxis: {
                    title: {
                        text: null
                    },
                    labels: {
                        formatter: function () {
                            return (Math.abs(this.value)) ;
                        }
                    },
                },
                plotOptions: {
                    series: {
                        stacking: 'normal'
                    }
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.series.name + ',年份 ' + this.point.category + '</b><br/>' +
                                '人数: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
                    }
                },
                series: [{
                    name: '男',
                    data: list1
                }, {
                    name: '女',
                    data: list2
                }]


            });
        }
    })


</script>
</body>
</html>
